<template>
  <div class="star">
      <span v-for="(starStatus, index) in getStars" :class="starStatus ? 'on' : 'off'" class="star-item"
            track-by="index"
            @click="starClick(index)"
      ></span>
  </div>
</template>

<script>
  export default {
    name: 'scroe-star',
    model: {
      prop: 'currentscroe',
      event: 'change'
    },
    props: {
//      currentscroe: 1,
      someValue: String
    },
    data () {
      return {
        maxScroe: 5,
        stars: [true, false, false, false, false],
        scroe: 1
      }
    },
    computed: { // 计算属性
      getStars () {
        this.stars = []
        for (let i = 0; i < this.maxScroe; i++) {
          if (i < this.scroe) {
            this.stars.push(true)
          } else {
            this.stars.push(false)
          }
        }
        return this.stars
      }
    },
    methods: {
      starClick (index) {
        let self = this
        this.scroe = (index + 1)
        this.currentscroe = this.scroe
        this.value = this.scroe
        this.$emit('change', self.scroe)
      }
    }
  }
</script>

<style lang="scss">

  div.star {
    height: 42px;
    margin-left: 10px;
    float: left;
    font-size: 0;
    /*background-color: greenyellow;*/

    >span.star-item {
      outline: none;
      margin-top: 9px;
      display: inline-block;
      background-repeat: no-repeat;
      width: 25px;
      height: 25px;
      margin-right: 20px;
      background-size: 100%;
    }

    >span:first-child {
      margin-left: 10px;
    }

    >span:last-child {
      margin-right: 10px;
    }
  }

  .star-item.on{
    background-image: url('../../assets/img/appraise/apparise_star_sel.png');
  }
  .star-item.half{
    background-image: url('../../assets/img/appraise/apparise_star_sel.png');
  }
  .star-item.off{
    background-image: url('../../assets/img/appraise/apparise_star_nor.png');
  }
</style>
